<template>
  <div class="content">
    <el-row :gutter="70" type="flex" justify="start">
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage()">
          <div class="row-span-left">
            <div class="icon-area all-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">全部报备</div>
              <div class="count">{{summaryData.allCount}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage(1)">
          <div class="row-span-left">
            <div class="icon-area wait-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">待平台审核</div>
              <div class="count">{{summaryData.pendingReview}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage(2)">
          <div class="row-span-left">
            <div class="icon-area wait-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">待平台上架</div>
              <div class="count">{{summaryData.waitShelf}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage(3)">
          <div class="row-span-left">
            <div class="icon-area wait-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">平台已上架</div>
              <div class="count">{{summaryData.alreadyShelf}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row class="row-margin-top" :gutter="70" type="flex" justify="start">
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage(4)">
          <div class="row-span-left">
            <div class="icon-area complate-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">采购已完成</div>
              <div class="count">{{summaryData.finished}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage(5)">
          <div class="row-span-left">
            <div class="icon-area err-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">未审核通过</div>
              <div class="count">{{summaryData.noPass}}</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :md="6">
        <div class="grid-content" @click="go2ListPage(6)">
          <div class="row-span-left">
            <div class="icon-area err-icon"></div>
          </div>
          <div class="row-span-right">
            <div class="text-area">
              <div class="descrition">主动取消</div>
              <div class="count">{{summaryData.cancel}}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="less" scoped>
.content {
  padding: 10px;
  height: 300px;
  width: 95%;
  margin: 50px auto;
}

.row-margin-top {
  margin-top: 80px;
}

.row-span-left {
  float: left;
  height: 100%;
  width: 90px;
  padding: 10px;
}

.row-span-right {
  height: 100%;
  padding: 10px;
  float: right;
}

.icon-area {
  margin: 10px 8px;
  width: 54px;
  height: 54px;
  background-repeat: no-repeat;
}

.all-icon {
  background-image: url('/static/image/index/all-icon.png');
}

.complate-icon {
  background-image: url('/static/image/index/complate-icon.png');
}

.err-icon {
  background-image: url('/static/image/index/err-icon.png');
}
.wait-icon {
  background-image: url('/static/image/index/wait-icon.png');
}

.text-area {
  width: 100px;
  height: 54px;
  margin-top: 10px;
}

.text-area > .descrition {
  margin-bottom: 20px;
}

.text-area > .count {
  color: red;
  text-decoration: underline;
}

.el-col {
  border-radius: 4px;
}
.grid-content {
  height: 100px;
  border: 1px solid #bbbbbb;
  box-shadow: 2px 2px 5px 0px #aaaaaa;
  cursor: pointer;
  border-radius: 5px;
}
</style>


<script>
export default {
  props: {
    summaryData: {
      type: Object,
      require: true,
      default: null
    }
  },
  name: 'SummaryReport',
  data() {
    return {
      fromOSS: false
    }
  },
  created() {
    if (this.$route.name.indexOf('OSS') > -1) this.fromOSS = true
  },
  mounted() {},
  methods: {
    /**
     * 页面跳转
     */
    go2ListPage(status) {
      let path = this.fromOSS ? 'OSSFilings' : 'MyFiling'
      this.$router.push({ path: path, query: { status: status } })
    }
  }
}
</script>